<template>
  <!-- Vue3组件中的模板结构可以没有根标签 -->
  <!-- 一个人的信息 -->

  <!-- 
      {{name}}其中Vue3在解析到这块代码的时候，当发现name是一个ref引用对象的时候，
      自动将.value进行添加了，所以开发的过程中可以省略.value的写法。
  -->
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工资种类：{{person.job.type}}</h2>
  <h2>工资薪水：{{person.job.salary}}</h2>
  <h2>爱好{{person.hobby}}</h2>
  <h2>测试的数据c：{{person.job.a.b.c}}</h2>
  <button @click="changeInfo()">修改人的信息</button>

</template>

<script>
  // 引入一个ref 函数。
  import { reactive } from 'vue';

  export default {
    name: 'App',
    // setup 配置项省略写法 
    // 组件中所用到的：数据、方法等等，均要配置在setup中。
    setup() {
      let person = reactive({
        name: '张三',
        age: 18,
        job: {
          type: '前端工程师',
          salary: '30k',
          a: {
            b: {
              c: 200
            }
          }
        },
        hobby: ['抽烟', '喝酒', '烫头']
      });


      // 方法
      function changeInfo() {
        person.name = '李四';
        person.age = 48;
        person.job.type = 'UI设计师';
        person.job.salary = '60K';
        person.job.a.b.c = 999;
        person.hobby[0] = '学习';
      }

      // // 返回一个对象，常用
      // // 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）
      return {
        person: person,
        changeInfo: changeInfo,
      }
    }
  }
</script>